<!--
<template>
  <div>
    <div> {{ count }} </div>
    <div> {{ stateRef }} </div>
    <div> {{ stateRct.number }} </div>
    <div> {{ number }} </div>
  </div>
</template>
-->
<template>
  <div>
    <Test :title="title" :count="count" @plus="plus" />
  </div>
</template>

<script>
// Composition Api 不是用户层面上的 Vue框架
// hook -> 组合起来 -> Vue3.0 Composition API 框架涉及模式
// watch -> { watch, onMounted, computed } form 'vue';
// 组合的体现: 一个vue 是由多个hook 组合而成的框架

// options Api
// {
//   a: 1,
//   test: function (){}
// }

// Vue3 是 Options API + Composition API

import { ref, reactive, toRefs, h } from 'vue';
import Test from '@/components/Test';

export default {
  name: 'App',
  components: {
    Test
  },
  // beforeCreate() {}, // Vue3 中这两个生命周期已被删除
  // created() {},
  // data() { // Vue3 中 已被删除
  //   return {}
  // },

  // 当实例被创建、属性都初始化完成后 在beforeCreate 之前调用 
  setup() { // 入口函数，
    // console.log('setup');

    // const stateRef = ref(1); // 响应式数据
    // const stateRct = reactive({
    //   number: 2
    // })
    // const stateToRef = reactive({
    //   number: 3
    // })

    // 当读取或修改时取值需要用.value 但return出去的时候会自动把值拆出来
    // console.log(stateRef.value);
    // setTimeout(() => {
    //   stateRef.value = 666;
    // }, 1000);

    // 如果return 了一个对象，这个对象的所有属性就会合并到render 函数里
    // 以 render 的context(执行上下文) 提供于template(转虚拟dom时的数据)使用
    // return {
    //   stateRef,
    //   stateRct,
    //   ...toRefs(stateToRef), // toRefs 转引用
    //   count: 0 // 静态的数据
    // }
    // return () => h('h1', [stateRef.value, stateRct.number]); // 使用 h 函数

    const title = ref('这个是子组件');
    setTimeout(() => {
      title.value = '我是Vue3的子组件'
    }, 2000);

    const count = ref(0);

    const plus = (num) => {
      count.value += num;
    }

    return {
      title,
      count,
      plus
    }
  }
}
</script>

<style>

</style>
